<template>
    <div>
        <div class="footer">
            <img :src="songDetail.songinfo.pic_small" :style="{'animation-play-state':animationPlayState}" alt="" @click="changeUrl">
            <audio ref="audio" :src="songDetail.bitrate.show_link" loop></audio>
            <div @click="changeUrl">
                <span>{{songDetail.songinfo.title}}</span><br>
                <span>{{songDetail.songinfo.author}}</span>
            </div>
            <div>
                <van-icon name="play-circle-o" v-if="flag" @click="song"/>
                <van-icon name="pause-circle-o" v-else @click="song1"/>
                <van-icon name="bars"/>
            </div>
        </div>
    </div>
</template>

<script>
    import {getSongDetail} from "../api/api";

    export default {
        name: "footer11",
        data(){
            return{
                songDetail:[],
                flag:true,
                animationPlayState:"paused"
            }
        },
        created() {
            getSongDetail("247696").then(res=>{
                console.log(res);
                this.songDetail = res;
            });
        },
        methods:{
            song(){
                this.$refs.audio.play();
                this.animationPlayState ="running";
                this.flag = false;
            },
            song1(){
                this.$refs.audio.pause();
                this.animationPlayState ="paused";
                this.flag =true;
            },
            changeUrl(){
                this.$store.commit("changetime",this.$refs.audio.currentTime)
                this.$router.push("/musicDetail?songId=675017674&currentTime="+this.$refs.audio.currentTime)
            }
        }
    }
</script>

<style lang="less" scoped>
       .footer{
           box-sizing: border-box;
           height: 50px;
           width: 100%;
           display: flex;
           justify-content: space-between;
           align-items: center;
           padding: 0 10px;
           img{
               height: 40px;
               width: 40px;
               border-radius: 50%;
               animation: trun 12s linear infinite ;
               animation-play-state:running;
           }
           @-webkit-keyframes trun {
               to {
                   transform: rotate(1turn);
               }
           }
           div:nth-of-type(1){
               width: calc(100% - 160px);
               span:nth-of-type(1){
                   font-size: 14px;
               }
               span:nth-of-type(2){
                   font-size: 12px;
                   color: #999999;
               }
           }
           div:nth-of-type(2){
               margin-top: 5px;
               font-size: 35px;
               i{
                   margin: 0 10px;
               }
           }
       }
</style>